<template>
    <div id="a1">
        <div class="s1">
            <dv-border-box-13>
                <div class="contentOne">
                    <div class="left">
                        <div class="text">全球区域数据中心数量</div>
                    </div>
                    <div class="right">
                        <div class="textR">
                            {{ centerNum }}
                        </div>
                    </div>
                </div>
            </dv-border-box-13>
        </div>
        <div class="s2">
            <dv-border-box-8>
                <div class="dTit">
                    <div class="tA">国家数据中心数量排行</div>
                </div>
                <left-detail-chart class="lD"></left-detail-chart>
            </dv-border-box-8>
        </div>


        <div class="s1">
            <dv-border-box-13>
                <div class="contentOne">
                    <div class="left">
                        <div class="text">微软云POP数量
                        </div>
                    </div>
                    <div class="right">
                        <div class="textR">
                            {{ popNum }}
                        </div>
                    </div>
                </div>
            </dv-border-box-13>
        </div>
        <div class="s1" style="margin-bottom: 200px;">
            <dv-border-box-13>
                <div class="contentOne">
                    <div class="left">
                        <div class="text">微软云海地光缆数量
                        </div>
                    </div>
                    <div class="right">
                        <div class="textR">
                            {{ cableNum }}
                        </div>
                    </div>
                </div>
            </dv-border-box-13>
        </div>
    </div>
</template>

<script>
import { getDataCenterList, popList, getCableNum, getDataCenterListNew } from "@/api/dataList";
import { getCableInfoList } from "@/api/leftDetailList-physics"
import leftDetailChart from './leftDetailChart/leftDetailChart.vue'

export default {
    components: { leftDetailChart },
    data() {
        return {
            centerNum: '',
            popNum: '',
            opticalNum: '',
            cableNum: ''
        }
    },
    mounted() {
        this.initPageOne();
        this.initPageTwo();
        this.initPageThree();
        // this.initPageFour();
    },
    methods: {
        initPageOne() {
            let params = {
                pageSize: 10,
                pageNum: 1
            };
            getDataCenterListNew()
                .then((res) => {
                    if (res.code === 200) {
                        this.centerNum = res.data.length
                    } else {
                        this.$message.error('获取数据失败!')
                    }
                })
                .catch((err) => {
                    console.log("err", err);
                });
        },
        initPageTwo() {
            let params = {
                pageSize: 10,
                pageNum: 1
            };
            getCableNum(params)
                .then((res) => {
                    if (res.code === 200) {
                        // console.log('res', res);
                        this.cableNum = res.cableNum
                    } else {
                        this.$message.error('获取数据失败!')
                    }
                })
                .catch((err) => {
                    console.log("err", err);
                });

            getDataCenterListNew(params)
                .then((res) => {
                    if (res.code === 200) {
                        // console.log('res', res);
                        // this.cableNum = res.cableNum
                    } else {
                        this.$message.error('获取数据失败!')
                    }
                })
                .catch((err) => {
                    console.log("err", err);
                });
        },
        initPageThree() {
            let params = {
                pageSize: 10,
                pageNum: 1
            };
            popList(params)
                .then((res) => {
                    if (res.code === 200) {
                        // console.log('res', res);
                        this.popNum = res.data.total
                    } else {
                        this.$message.error('获取数据失败!')
                    }
                })
                .catch((err) => {
                    console.log("err", err);
                });
        },

        initPageFour() {
            let params = {
                pageSize: 10,
                pageNum: 1
            };
            getCableInfoList(params)
                .then((res) => {
                    if (res.code === 200) {
                        this.opticalNum = res.data.total
                    } else {
                        this.$message.error('获取数据失败!')
                    }
                })
                .catch((err) => {
                    console.log("err", err);
                });
        },
    },
}
</script>

<style lang="scss" scoped>
#a1 {
    width: 450px;
    height: 95%;
    padding-top: 20px;
    padding-left: 10px;
    z-index: 1;

    .s1 {
        &:nth-child(-n+3) {
            margin-bottom: 20px;
        }
    }

    .s1 {
        height: 120px;

        .contentOne {
            width: 100%;
            height: 100%;
            display: flex;
            // color: deepskyblue;
            color: white;

            .left {
                width: 50%;
                height: 100%;
                font-size: 18px;
                font-weight: 900;
                display: flex;
                align-items: center;

                .text {
                    white-space: nowrap;
                    margin-left: 40px;
                }
            }

            .right {
                width: 50%;
                height: 100%;
                font-size: 28px;
                font-weight: 700;
                position: relative;

                .textR {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    white-space: nowrap;
                }
            }
        }
    }

    .s2 {
        width: 100%;
        height: 450px;
        margin-bottom: 20px;

        .dTit {
            width: 100%;
            font-size: 20px;
            color: white;
            padding-top: 20px;
            padding-left: 35px;
        }

        .lD {
            width: 100%;
            height: 100%;
        }
    }
}
</style>